<template>
  <div class="container bg-gray">
    <div class="goods-info">
      <div class="goods-info-inner">
        <div class="flex">
          <div>
        <xd-img :src="detail.avatar|absUrl" class="goods-img" />
          </div>
          <div class="goods-info flex-con">
            <div class="goods-title">
              {{detail.title}}
            </div>
            <div class="flex">
              <div class="flex-con goods-num">
                X {{detail.num}}
              </div>
              <div class="goods-money">
                ￥{{detail.price}}元
              </div>
            </div>
          </div>
        </div>
      </div>
      <img src="../../assets/imgs/other/linerb.png" class="line-rb" alt="">

    </div>
    <div class="list-items">
      <div class="list-item border-b" @click="toggleGoodsStatus"  v-if="isRefundGoods">
        <div class="flex">
          <div>
            货物状态
          </div>
          <div class="flex-con txt-gray text-right">
             {{goodsStatus[formData.goodsStatus]||'请选择'}}
          </div>
          <img src="../../assets/icons/gt3@2x.png" class="gt" alt="">
        </div>

      </div>
      <label class="list-item border-b block" @click="isShowRefundReason=true">
        <div class="flex">
          <div>
            退款原因
          </div>
          <div class="flex-con txt-gray text-right">
            {{refund_reasons[formData.refundReason]||'请选择'}}
          </div>
          <img src="../../assets/icons/gt3@2x.png" class="gt" alt="">
        </div>

      </label>

    </div>
    <div class="list-items">
      <div class="list-item border-b">
        <div class="flex">
          <div>
            退款金额
          </div>
          <div class="flex-con txt-money text-right">
            ￥{{moneyprice(detail.price,detail.num)}}
          </div>
        </div>
      </div>
    </div>
    <label class="list-items block">
      <div class="list-item border-b">
        <div class="flex">
          <div>
            退款说明
          </div>
          <div class="flex-con txt-gray text-right">
            <input type="text" v-model="formData.refundWords" class="full-txt-input text-right" placeholder="选填">
          </div>
        </div>
      </div>
    </label>
    <div class="list-items">
      <div class="list-item">
        上传凭证
        <div class="pic-list pic-item-area clearfix">
          <vue-core-image-upload
            class="pic-item"
            :crop="false"
            inputOfFile="file"
            :multiple="true"
            @click.native="beforeUpload"
            @imagechanged="imagechanged"
            @imageuploading="imageuploading"
            @errorhandle="imgerrorhandle"
            :multiple-size="leftImgCount"
            @imageuploaded="imageuploaded"
            :max-file-size="2097152"
            :url="'/util/uploadMultipleFiles'" >
          <img src="../../assets/icons/addbtn.png" alt="" >
          </vue-core-image-upload>            
          <div class="pic-item" v-for="(img,index) in formData.imgSrcs" :key="img">
              <img :src="img|absUrl" alt="" >
              <div class="remove-btn" @click="rmImg(index)">×</div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-submit-before"></div>
    <div class="btn-submit" @click="doSubmitData">
      提交
    </div>

     <div class="bigmasker" v-if="isShowRefundReason" @click="isShowRefundReason=false">
      <div class="dialog" @click.stop="noop">
        <div class="title">退款原因</div>
        <div class="list-items">
          <div class="list-item border-b" @click="toggleSeleceted(index)" v-for="(item,index) in refund_reasons" :key="index">
            <div class="flex">
              <div class="flex-con">
                  {{item}}
              </div>
               <img v-if="index===formData.refundReason" src="../../assets/imgs/refund/selectcirle@2x.png" alt="" class="selectcircle-img">
             <div v-else class="circle-img"></div>
            </div>
            
            </div>
        </div>
        <div class="submitbtn" @click="isShowRefundReason=false">
            确定
        </div>
      </div>
    </div>

   <div class="bigmasker" v-if="isShowGoodsStatus" @click="isShowGoodsStatus=false">
      <div class="dialog" @click.stop="noop">
        <div class="title">货物状态</div>
        <div class="list-items">
          <div class="list-item border-b" @click="toggleGoodsStatusSeleceted(index)" v-for="(item,index) in goodsStatus" :key="index">
            <div class="flex">
              <div class="flex-con">
                  {{item}}
              </div>
               <img v-if="index===formData.goodsStatus" src="../../assets/imgs/refund/selectcirle@2x.png" alt="" class="selectcircle-img">
             <div v-else class="circle-img"></div>
            </div>
            
            </div>
        </div>
        <div class="submitbtn" @click="isShowGoodsStatus=false">
            确定
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import { refundReason, goodsStatus } from "../../config/constants";
import VueCoreImageUpload from "vue-core-image-upload";
export default {
  components: {
    "vue-core-image-upload": VueCoreImageUpload
  },
  data() {
    return {
      goodsStatus,
      refund_reasons: refundReason,
      isShowRefundReason: false,
      isRefundGoods: 0,
      leftImgCount: 3,
      formData: {
        refundReason: "",
        refundWords: "",
        imgSrcs: [],
        goodsStatus: ""
      },
      detail: {},
      isShowGoodsStatus: false
    };
  },
  filters: {},
  methods: {
    doSubmitData() {
      if (this.isRefundGoods && this.formData.goodsStatus === "") {
        this.$toast("请选择货物状态");
        return;
      }

      if (this.formData.refundReason === "") {
        this.$toast("请选择退款原因");
        return;
      }

      this.showLoading();
      this.formData.imgSrcsStr = this.formData.imgSrcs.join(",");
      this.formData.orderItemId = this.$route.query.id;
      this.formData.refundType = this.$route.query.typeId || 0;
      this.$post("/api/bill/refund_apply", this.formData)
        .then(res => {
          this.$toast("提交申请成功");
          this.$router.go(-1);
          this.hideLoading();
        })
        .catch(_ => {
          this.hideLoading();
        });
    },
    toggleGoodsStatusSeleceted(index) {
      this.formData.goodsStatus = index;
    },
    beforeUpload(e) {
      if (this.formData.imgSrcs.length >= 3) {
        this.$toast("最多只能上传3张图片");
        e.preventDefault();
      }
    },
    imageuploading(e) {
      if (e == "FILE NUM OVERLOAD") {
        this.$toast("最多只能上传3张图片");
      } else if (e.indexOf("FILE IS TOO LARGER") != -1) {
        this.$toast("上传文件不能大于2M");
      }
    },
    imagechanged(e) {
      console.log(arguments);
    },
    imageuploaded(res) {
      this.hideLoading();
      if (res.errcode === 0) {
        this.formData.imgSrcs.push(...res.info);
        let leftImgCount = 3 - this.formData.imgSrcs.length;
        this.leftImgCount = leftImgCount <= 0 ? 0 : leftImgCount;
      }
    },
    rmImg(idx) {
      this.formData.imgSrcs.splice(idx, 1);
    },
    imgerrorhandle(e) {
      console.log("imgerrorhandle");
      if (e == "FILE NUM OVERLOAD") {
        this.$toast("最多只能上传3张图片");
      }
    },
    moneyprice(price, num) {
      if (!num) {
        return "--";
      }
      return price * num;
    },
    toggleSeleceted(item) {
      this.formData.refundReason = item;
    },

    toggleGoodsStatus() {
      this.isShowGoodsStatus = !this.isShowGoodsStatus;
    }
  },
  created() {
    let typeId = this.$route.query.typeId || 0;
    this.isRefundGoods = typeId > 0;
    let id = this.$route.query.id;
    if (id) {
      this.showLoading();
      this.$post("/api/bill/bill_item_detail", { id })
        .then(data => {
          this.detail = data;
          this.hideLoading();
        })
        .catch(_ => {
          this.hideLoading();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.btn-submit {
  height: 1.0933rem;
  line-height: 1.0933rem;
  background-color: #007f00;
  font-size: 0.4267rem;
  color: #fff;
  position: fixed;
  text-align: center;
  left: 0;
  bottom: 0;
  width: 100%;
}

.goods-info {
  background-color: #fff;
  position: relative;
  .goods-info-inner {
    padding: 0.4rem;
  }
  .goods-img {
    width: 2.64rem;
    height: 1.6933rem;
  }
  .goods-info {
    padding-left: 0.3333rem;
  }
  .goods-title {
    font-size: 0.3467rem;
    color: #17402a;
    padding-bottom: 0.6667rem;
  }
  .goods-num {
    font-size: 0.32rem;
    color: rgba(23, 64, 42, 0.65);
  }
  .goods-money {
    font-size: 0.32rem;
    color: #ff2a2a;
  }
}

.pic-item-area {
  padding-top: 0.3rem;
}

.line-rb {
  width: 100%;
  display: block;
}

.txt-money {
  color: #ff2a2a;
}

.gt {
  margin-left: 0.2133rem;
}

.txt-gray {
  color: #bbb;
}

.list-items {
  padding-top: 0.28rem;
  font-size: 0.3733rem;
  .list-item {
    padding: 0.3467rem 0.4rem 0.4rem 0.4rem;
    background-color: #fff;
    .title {
      font-size: 0.3733rem;
      color: #222;
      padding-bottom: 0.28rem;
    }
    .tip {
      font-size: 0.32rem;
      color: #bbb;
    }
    .icon-field {
      img {
        width: 0.5467rem;
        height: 0.56rem;
        margin-right: 0.4933rem;
      }
    }
  }
}
.pic-item {
  width: 2rem;
  height: 2rem;
  float: left;
  margin-right: 0.4rem;
  position: relative;
}
.pic-item .remove-btn {
  position: absolute;
  right: -0.1rem;
  top: -0.1rem;
  width: 0.4rem;
  height: 0.4rem;
  line-height: 0.36rem;
  text-align: center;
  background-color: #ff2a2a;
  border-radius: 50%;
  color: white;
  font-size: 0.32rem;
}
.pic-item:nth-child(4n) {
  margin-right: 0;
}
.pic-item img {
  width: 2rem;
  height: 2rem;
}
.bigmasker {
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  .dialog {
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    .title {
      font-size: 0.4rem;
      text-align: center;
      padding: 0.56rem 0;
    }
    .list-items {
      color: #222222;
      padding-bottom: 2rem;
      .list-item {
        padding: 0.4rem;
        font-size: 0.4267rem;
      }
      .list-item:last-child::after {
        display: none;
      }
    }
    .selectcircle-img {
      width: 0.6rem;
      height: 0.5867rem;
    }
    .circle-img {
      width: 0.6rem;
      height: 0.5867rem;
      box-sizing: border-box;
      border: solid 1px #9a9a9a;
      border-radius: 50%;
    }
    .submitbtn {
      width: 10rem;
      height: 1.1467rem;
      line-height: 1.1467rem;
      font-size: 0.4267rem;
      color: #fff;
      background-color: #007f00;
      text-align: center;
    }
  }
}
</style>

